<%@ page pageEncoding="utf-8" language="java"%>
<%@ include file="/commons/taglibs.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html:html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<html:base/>
	<link rel="stylesheet" href="<c:out value="${ctx}"/>/styles/style1.css" type="text/css" />
	<title>iOS訂閱編輯頁</title>
	<script type="text/javascript" src="<c:out value="${ctx}"/>/js/jquery/jquery.js"></script>
	<script type="text/javascript" src="<c:out value="${ctx}"/>/js/jquery/jquery.validate.min.js"></script>
	<script type="text/javascript" src="<c:out value="${ctx}"/>/js/jquery/custom.validate.methods.js"></script>
	<script type="text/javascript" src="<c:out value="${ctx}"/>/js/jquery/jquery.metadata.js"></script>
	<script type="text/javascript">
	/**
	 * decorate datePicker on every _date and Key/Data area disable
	 */
	$(function() {
		$("#mainForm").validate({
			meta: "validate",
			messages:{
				'vo.appBoundleID':{
					required:"請輸入AppStore ID",
				},
				'vo.bookCity.id':{
					required:"請選擇書城",
				},
				'vo.subscribe.id':{
					required:"請選擇訂閱",
				}
			},
			submitHandler: function(form) {
				setButtonDisabled();
				document.mainForm.submit();
			}
		});
		if('delete' != '<bean:write name="lazyForm" property="op"/>' ){
			$("#bookcity").change(function(){
				
				var value = $("#bookcity").val();
				$("#subscribe").val("");
				$("#subscribe option").remove();
				
				if(value){
					$.post(
					    "${ctx}/ajaxGetSubscribe.do?i="+Math.random(),
					    {city_id : value},
					    function(data){
					    	if(data && data.length){	
								$(data).each(function(i){				
									var option = $("<option/>");
									$(option).attr("value",data[i].id);
									$(option).text(data[i].name);
									$("#subscribe").append(option);
								});
					    	}
					    },
					    'json'
				    );
				}
			});
		}
				
		// Area update
		$('td input[name^="vo"]').attr('disabled', '<aa:area op="${lazyForm.map.op}" area="data" />');
		$('td select[name^="vo"]').attr('disabled', '<aa:area op="${lazyForm.map.op}" area="data" />');
		$('td input[type=file]').attr('disabled', '<aa:area op="${lazyForm.map.op}" area="data" />');
		// $('td input[name="vo.id"]').attr('disabled', '<aa:area op="${lazyForm.map.op}" area="key" />');
		$('td input[name="vo.id"]').attr('disabled', 'disabled');
		
	});
	function setButtonDisabled(){
		$("#save, #back").attr("disabled",true);
	}
	</script>
</head>
<body>
<form id='mainForm' name='mainForm' action='<c:out value="${ctx}"/>/saveSubscribe4iOS.do' enctype="multipart/form-data"  method="post">
	<html:hidden property="op" name="lazyForm"/>
	<html:hidden property="vo.appStorePageL" name="lazyForm" />
	<html:hidden property="vo.appStorePageP" name="lazyForm" />
	<div id="DataArea">
	<table width="100%" border="0">
		<tr>
			<th class="th" colspan="2" ><bean:write property="op" name="lazyForm"/> </th>
		</tr>
		<tr>
			<td class="title">ID</td>
			<td class="one">
			<html:text styleId="id" name="lazyForm" property="vo.id" size="20" />
			</td>
		</tr>
		<tr>
			<td class="title">書城</td>
			<td class="one">
			<html:select styleClass="{validate:{required:true}}" styleId="bookcity" property="vo.bookCity.id" name="lazyForm" >
			    <html:option value=""></html:option>
    			<html:optionsCollection name="lazyForm" label="cityname" value="id"  property="cities"/>  
	     	</html:select>
			</td>
		</tr>
		<tr>
			<td class="title">訂閱</td>
			<td class="one">
			<html:select styleClass="{validate:{required:true}}" styleId="subscribe" property="vo.subscribe.id" name="lazyForm" >
    			<html:optionsCollection name="lazyForm" label="name" value="id"  property="subscriptions"/>  
	     	</html:select>
			</td>
		</tr>
		<tr>
			<td class="title">App設備</td>
			<td class="one">
			<html:select property="vo.appDevice" name="lazyForm" >
			    <html:option value="iPad">iPad</html:option>
			    <html:option value="iPhone">iPhone</html:option>
			</html:select>
			</td>
		</tr>
		<tr>
			<td class="title">AppStore ID</td>
			<td class="one">
			<html:text styleClass="{validate:{required:true}}" styleId="appBoundleID" name="lazyForm" property="vo.appBoundleID" size="20"/>	
			</td>
		</tr>
		<tr>
			<td class="title">AppStore類型</td>
			<td class="one">
			<html:text styleId="appGenre" name="lazyForm" property="vo.appGenre" size="20"/>
			</td>
		</tr>
		<tr>
			<td class="title">直式底圖</td>
			<td class="one">
			<logic:present name="lazyForm" property="vo.appStorePageL">
			<img src='<c:out value="${ctx}"/>/showPageL.do?file=<bean:write name="lazyForm" property="vo.appStorePageL"/>' />
			<p/>
			</logic:present> 
			<html:file styleId="appStorePageL" property="appStorePageL" name="lazyForm" size="20" />
			</td>
		</tr>
		<tr>
			<td class="title">橫式底圖</td>
			<td class="one">
			<logic:present name="lazyForm" property="vo.appStorePageP">
			<img src='<c:out value="${ctx}"/>/showPageP.do?file=<bean:write name="lazyForm" property="vo.appStorePageP"/>' />
			<p/>
			</logic:present> 
			<html:file styleId="appStorePageP" property="appStorePageP" name="lazyForm" size="20" />
			</td>
		</tr>
		<tr>
			<td class="title">訂閱ICON</td>
			<td class="one">
			<logic:present name="lazyForm" property="vo.appStoreIcon">
			<img src='<c:out value="${ctx}"/>/showSubscribeIcon.do?file=<bean:write name="lazyForm" property="vo.appStoreIcon"/>' />
			<p/>
			</logic:present> 
			<html:file styleId="appStoreIcon" property="appStoreIcon" name="lazyForm" size="20" />
			</td>
		</tr>
		<tr class="hidden">
			<td class="title">期刊ID</td>
			<td class="one">
			<html:text name="lazyForm" readonly="readonly" property="vo.journal_id" size="20"/>
			</td>
		</tr>
	</table>
	</div>
	<div id="send">
		<input type="submit" name="save" id="save" value=" 儲存" />
		<input type="button" name="back" id="back" value="上一頁" onclick="history.go(-1);" />
	</div>
</form>
</body>
</html:html>